<template>
  <yk-space dir="vertical" size="xl">
    <div class="card">
      <div class="card_title">
        <p class="card_title_name">访问量</p>
        <yk-radio-group 
        v-model="visitRadio" 
        type="button" 
        :solid="true"
        @change="getVisitData"
        >
          <yk-radio value="week">近一个周</yk-radio>
          <yk-radio value="moon">近一个月</yk-radio>
        </yk-radio-group>
      </div>
      <LineChart :data="visitData" chart-height="208px"/>
    </div>

    <div class="card">
      <div class="card_title">
        <p class="card_title_name">数据监测</p>
        <yk-radio-group 
        v-model="checkRadio" 
        type="button" 
        :solid="true"
        >
          <yk-radio value="week">近一个周</yk-radio>
          <yk-radio value="moon">近一个月</yk-radio>
        </yk-radio-group>
      </div>
      <div style="display: flex;">
      <PieChart :data="survey.data.device" title="设备总数" chart-height="208px"/>
      <PieChart :data="survey.data.website" title="访问总数" chart-height="208px"/>
    </div>
    </div>
  </yk-space>
</template>
<script setup lang="ts">
import { ref,onMounted } from "vue";
import { LineChart,PieChart } from "../echarts/index";
import { visit,survey } from "../../mock/data";

//访问量
const visitData = ref(visit.data);
const getVisitData = (e:string) => {
  let data = visit.data;
  if(e === "week"){
    data= data.slice(0,7);
  }
  visitData.value = data;
};
const visitRadio = ref("week");
const checkRadio = ref("week");
onMounted(() => {
  getVisitData(visitRadio.value);
});
</script>
<style scoped lang="less">

</style>
